<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>动态环图 | DataV - Vue3</title>
    <meta name="description" content="A VitePress site">
    <meta name="generator" content="VitePress v1.0.2">
    <link rel="preload stylesheet" href="/datav/assets/style.C8VC_uyd.css" as="style">
    
    <script type="module" src="/datav/assets/app.BMBSQpDM.js"></script>
    <link rel="preload" href="/datav/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/datav/assets/chunks/framework.CUKNheWb.js">
    <link rel="modulepreload" href="/datav/assets/chunks/theme.CQja-BaR.js">
    <link rel="modulepreload" href="/datav/assets/Other_ActiveRingChart_ActiveRingChart.md.kFBHJVUi.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-96c8aff6><!--[--><!--]--><!--[--><span tabindex="-1" data-v-13d4c8bb></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-13d4c8bb> Skip to content </a><!--]--><!----><header class="VPNav" data-v-96c8aff6 data-v-4ffb2379><div class="VPNavBar has-sidebar top" data-v-4ffb2379 data-v-c4d74611><div class="wrapper" data-v-c4d74611><div class="container" data-v-c4d74611><div class="title" data-v-c4d74611><div class="VPNavBarTitle has-sidebar" data-v-c4d74611 data-v-3e68f734><a class="title" href="/datav/" data-v-3e68f734><!--[--><!--]--><!----><span data-v-3e68f734>DataV - Vue3</span><!--[--><!--]--></a></div></div><div class="content" data-v-c4d74611><div class="content-body" data-v-c4d74611><!--[--><!--]--><div class="VPNavBarSearch search" data-v-c4d74611><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-c4d74611 data-v-97c5d44e><span id="main-nav-aria-label" class="visually-hidden" data-v-97c5d44e>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/datav/Guide/Guide.html" tabindex="0" data-v-97c5d44e data-v-5cf7233d><!--[--><span data-v-5cf7233d>指引</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/datav/Demo/Demo.html" tabindex="0" data-v-97c5d44e data-v-5cf7233d><!--[--><span data-v-5cf7233d>Demo</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-c4d74611 data-v-059fd0aa><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-059fd0aa data-v-973c0c42 data-v-fa44f4a2><span class="check" data-v-fa44f4a2><span class="icon" data-v-fa44f4a2><!--[--><span class="vpi-sun sun" data-v-973c0c42></span><span class="vpi-moon moon" data-v-973c0c42></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-c4d74611 data-v-537fe324 data-v-7ced4bbb><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vaemusic/datav-vue3" aria-label="github" target="_blank" rel="noopener" data-v-7ced4bbb data-v-4c2a3b1f><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-c4d74611 data-v-99d8ebef data-v-e4a57129><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e4a57129><span class="vpi-more-horizontal icon" data-v-e4a57129></span></button><div class="menu" data-v-e4a57129><div class="VPMenu" data-v-e4a57129 data-v-83f5e674><!----><!--[--><!--[--><!----><div class="group" data-v-99d8ebef><div class="item appearance" data-v-99d8ebef><p class="label" data-v-99d8ebef>Appearance</p><div class="appearance-action" data-v-99d8ebef><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-99d8ebef data-v-973c0c42 data-v-fa44f4a2><span class="check" data-v-fa44f4a2><span class="icon" data-v-fa44f4a2><!--[--><span class="vpi-sun sun" data-v-973c0c42></span><span class="vpi-moon moon" data-v-973c0c42></span><!--]--></span></span></button></div></div></div><div class="group" data-v-99d8ebef><div class="item social-links" data-v-99d8ebef><div class="VPSocialLinks social-links-list" data-v-99d8ebef data-v-7ced4bbb><!--[--><a class="VPSocialLink no-icon" href="https://github.com/vaemusic/datav-vue3" aria-label="github" target="_blank" rel="noopener" data-v-7ced4bbb data-v-4c2a3b1f><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-c4d74611 data-v-47a19c01><span class="container" data-v-47a19c01><span class="top" data-v-47a19c01></span><span class="middle" data-v-47a19c01></span><span class="bottom" data-v-47a19c01></span></span></button></div></div></div></div><div class="divider" data-v-c4d74611><div class="divider-line" data-v-c4d74611></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-96c8aff6 data-v-b336e3b1><div class="container" data-v-b336e3b1><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b336e3b1><span class="vpi-align-left menu-icon" data-v-b336e3b1></span><span class="menu-text" data-v-b336e3b1>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-b336e3b1 data-v-3e1b0d9d><button data-v-3e1b0d9d>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-96c8aff6 data-v-b2b6bc14><div class="curtain" data-v-b2b6bc14></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b2b6bc14><span class="visually-hidden" id="sidebar-aria-label" data-v-b2b6bc14> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b2b6bc14><section class="VPSidebarItem level-0" data-v-b2b6bc14 data-v-72e627ea><div class="item" role="button" tabindex="0" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><h2 class="text" data-v-72e627ea>介绍</h2><!----></div><div class="items" data-v-72e627ea><!--[--><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Guide/Guide.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Guide/BorderTip.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框组件注意事项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Guide/contribute.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>二次开发</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b2b6bc14><section class="VPSidebarItem level-0" data-v-b2b6bc14 data-v-72e627ea><div class="item" role="button" tabindex="0" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><h2 class="text" data-v-72e627ea>边框</h2><!----></div><div class="items" data-v-72e627ea><!--[--><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox1/BorderBox1.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框1</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox2/BorderBox2.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框2</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox3/BorderBox3.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框3</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox4/BorderBox4.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框4</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox5/BorderBox5.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框5</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox6/BorderBox6.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框6</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox7/BorderBox7.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框7</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox8/BorderBox8.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框8</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox9/BorderBox9.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框9</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox10/BorderBox10.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框10</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox11/BorderBox11.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框11</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox12/BorderBox12.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框12</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Border/BorderBox13/BorderBox13.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>边框13</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b2b6bc14><section class="VPSidebarItem level-0" data-v-b2b6bc14 data-v-72e627ea><div class="item" role="button" tabindex="0" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><h2 class="text" data-v-72e627ea>装饰</h2><!----></div><div class="items" data-v-72e627ea><!--[--><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration1/Decoration1.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰1</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration2/Decoration2.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰2</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration3/Decoration3.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰3</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration4/Decoration4.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰4</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration5/Decoration5.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰5</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration6/Decoration6.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰6</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration7/Decoration7.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰7</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration8/Decoration8.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰8</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration9/Decoration9.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰9</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration10/Decoration10.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰10</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration11/Decoration11.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰11</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Decoration/Decoration12/Decoration12.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>装饰12</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b2b6bc14><section class="VPSidebarItem level-0 has-active" data-v-b2b6bc14 data-v-72e627ea><div class="item" role="button" tabindex="0" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><h2 class="text" data-v-72e627ea>其他</h2><!----></div><div class="items" data-v-72e627ea><!--[--><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/Button/Button.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>按钮</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/ConicalColumnChart/ConicalColumnChart.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>锥形柱图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/PercentPond/PercentPond.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>进度池</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/WaterLevelPond/WaterLevelPond.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>水位图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/Loading/Loading.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/FlylineChartEnhanced/FlylineChartEnhanced.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>飞线图增强版</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/FlylineChart/FlylineChart.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>飞线图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/ScrollRankingBoard/ScrollRankingBoard.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>排名轮播表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/ScrollBoard/ScrollBoard.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>轮播表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/Charts/Charts.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>图表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/CapsuleChart/CapsuleChart.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>胶囊柱图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/ActiveRingChart/ActiveRingChart.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>动态环图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/DigitalFlop/DigitalFlop.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>数字翻牌器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-72e627ea data-v-72e627ea><div class="item" data-v-72e627ea><div class="indicator" data-v-72e627ea></div><a class="VPLink link link" href="/datav/Other/FullScreenContainer/FullScreenContainer.html" data-v-72e627ea><!--[--><p class="text" data-v-72e627ea>全屏容器</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-96c8aff6 data-v-f68e7921><div class="VPDoc has-sidebar has-aside" data-v-f68e7921 data-v-a3095c00><!--[--><!--]--><div class="container" data-v-a3095c00><div class="aside" data-v-a3095c00><div class="aside-curtain" data-v-a3095c00></div><div class="aside-container" data-v-a3095c00><div class="aside-content" data-v-a3095c00><div class="VPDocAside" data-v-a3095c00 data-v-efbe4984><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-efbe4984 data-v-087e29f0><div class="content" data-v-087e29f0><div class="outline-marker" data-v-087e29f0></div><div class="outline-title" role="heading" aria-level="2" data-v-087e29f0>目录</div><nav aria-labelledby="doc-outline-aria-label" data-v-087e29f0><span class="visually-hidden" id="doc-outline-aria-label" data-v-087e29f0> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-087e29f0 data-v-3e3d381d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-efbe4984></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-a3095c00><div class="content-container" data-v-a3095c00><!--[--><!--]--><main class="main" data-v-a3095c00><div style="position:relative;" class="vp-doc _datav_Other_ActiveRingChart_ActiveRingChart" data-v-a3095c00><div><h1 id="动态环图" tabindex="-1">动态环图 <a class="header-anchor" href="#动态环图" aria-label="Permalink to &quot;动态环图&quot;">​</a></h1><p>动态环图</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><!----><details><summary>查看代码</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> w50rem</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> h34rem</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> flex</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">~ col</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> justify-center</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> items-center</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> bg-dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">dv-active-ring-chart</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> :</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">config</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">conf</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">300</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">height</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">300</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">/&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> flex</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">~ col</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> gap2</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> justify-center</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> items-center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text-white</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">城市：</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> v-model</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityName</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> demo-input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text-white</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Value：</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> v-model</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityValue</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">number</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> demo-input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> @</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">click</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">addData</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">          添加数据</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> setup</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> cityName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">测试</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> cityValue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">58</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> conf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> reactive</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  lineWidth</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 24</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  digitalFlopStyle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    fill</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">pink</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  },</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  data</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">杭州</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 98</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">金华</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 150</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">宁波</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 62</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">太原</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 54</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  ],</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> addData</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =&gt;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">  if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">!</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ||</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> !</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityValue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">    return</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">  conf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">data</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">push</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> cityName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> parseInt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityValue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">),</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div></details><h2 id="数字不使用digitalflop" tabindex="-1">数字不使用DigitalFlop <a class="header-anchor" href="#数字不使用digitalflop" aria-label="Permalink to &quot;数字不使用DigitalFlop&quot;">​</a></h2><!----><details><summary>查看代码</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> w50rem</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> h34rem</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> flex</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">~ col</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> justify-center</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> items-center</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> bg-dark</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">dv-active-ring-chart</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> :</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">config</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">conf</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">300</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">height</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">300</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> :</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">isDigitalFlop</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">false</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">/&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> flex</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">~ col</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> gap2</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> justify-center</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> items-center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text-white</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">城市：</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> v-model</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityName</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> demo-input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> text-white</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Value：</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">span</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> v-model</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityValue</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">number</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> demo-input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> btn</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> @</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">click</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">addData</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&quot;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">          添加数据</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">        &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  &lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> setup</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> cityName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">测试</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> cityValue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> ref</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">58</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> conf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> reactive</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  lineWidth</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 24</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  digitalFlopStyle</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    fill</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">pink</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  },</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  data</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">杭州</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 98</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">金华</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 150</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">宁波</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 62</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    {</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">太原</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">      value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 54</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  ],</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  numToFixed</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> addData</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =&gt;</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">  if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">!</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ||</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> !</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityValue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">    return</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">  conf</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">data</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">push</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> cityName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> parseInt</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">cityValue</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">),</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">&lt;/</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">&gt;</span></span></code></pre></div></details><h2 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to &quot;属性&quot;">​</a></h2><table><thead><tr><th style="text-align:center;">参数</th><th style="text-align:center;">说明</th><th style="text-align:center;">类型</th><th style="text-align:center;">可选值</th><th style="text-align:center;">默认值</th></tr></thead><tbody><tr><td style="text-align:center;">config</td><td style="text-align:center;">配置</td><td style="text-align:center;">Object</td><td style="text-align:center;"></td><td style="text-align:center;">见下方</td></tr><tr><td style="text-align:center;">isDigitalFlop<span class="VPBadge tip"><!--[-->1.7.2<!--]--></span></td><td style="text-align:center;">数字是否使用DigitalFlop显示</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">---</td><td style="text-align:center;">true</td></tr></tbody></table><h2 id="config属性" tabindex="-1">config属性 <a class="header-anchor" href="#config属性" aria-label="Permalink to &quot;config属性&quot;">​</a></h2><table><thead><tr><th style="text-align:center;">参数</th><th style="text-align:center;">说明</th><th style="text-align:center;">类型</th><th style="text-align:center;">可选值</th><th style="text-align:center;">默认值</th></tr></thead><tbody><tr><td style="text-align:center;">radius</td><td style="text-align:center;">环半径</td><td style="text-align:center;">String/Number</td><td style="text-align:center;"><code>&#39;50%&#39;/ 100</code></td><td style="text-align:center;"><code>&#39;50%&#39;</code></td></tr><tr><td style="text-align:center;">activeRadius</td><td style="text-align:center;">环半径（动态）</td><td style="text-align:center;">String/Number</td><td style="text-align:center;"><code>&#39;55%&#39;/110</code></td><td style="text-align:center;"><code>&#39;55%&#39;</code></td></tr><tr><td style="text-align:center;">data</td><td style="text-align:center;">环数据</td><td style="text-align:center;"><code>Array&lt;Object&gt;</code></td><td style="text-align:center;"><code>data属性见下方表格</code></td><td style="text-align:center;"><code>[]</code></td></tr><tr><td style="text-align:center;">lineWidth</td><td style="text-align:center;">环线条宽度</td><td style="text-align:center;">Number</td><td style="text-align:center;">---</td><td style="text-align:center;">20</td></tr><tr><td style="text-align:center;">activeTimeGap</td><td style="text-align:center;"><code>切换间隔(ms)</code></td><td style="text-align:center;">Number</td><td style="text-align:center;">---</td><td style="text-align:center;">3000</td></tr><tr><td style="text-align:center;">color</td><td style="text-align:center;">环颜色</td><td style="text-align:center;"><code>Array&lt;String&gt;</code></td><td style="text-align:center;"><code>[1]</code></td><td style="text-align:center;"><code>[]</code></td></tr><tr><td style="text-align:center;">textColor<span class="VPBadge tip"><!--[-->1.4.1<!--]--></span></td><td style="text-align:center;">文字颜色</td><td style="text-align:center;"><code>String</code></td><td style="text-align:center;">---</td><td style="text-align:center;"><code>&#39;#fff&#39;</code></td></tr><tr><td style="text-align:center;">digitalFlopStyle</td><td style="text-align:center;">数字翻牌器样式</td><td style="text-align:center;">Object</td><td style="text-align:center;">---</td><td style="text-align:center;"><code>[2]</code></td></tr><tr><td style="text-align:center;">digitalFlopToFixed</td><td style="text-align:center;">数字翻牌器小数位数</td><td style="text-align:center;">Number</td><td style="text-align:center;">---</td><td style="text-align:center;">0</td></tr><tr><td style="text-align:center;">numToFixed<span class="VPBadge tip"><!--[-->1.7.2<!--]--></span></td><td style="text-align:center;">数字小数位数</td><td style="text-align:center;">Number</td><td style="text-align:center;">---</td><td style="text-align:center;">0</td></tr><tr><td style="text-align:center;">digitalFlopUnit</td><td style="text-align:center;">数字翻牌器单位</td><td style="text-align:center;">String</td><td style="text-align:center;">---</td><td style="text-align:center;"><code>&#39;&#39;</code></td></tr><tr><td style="text-align:center;">animationCurve</td><td style="text-align:center;">动效曲线</td><td style="text-align:center;">String</td><td style="text-align:center;">Transition</td><td style="text-align:center;">&#39;easeOutCubic&#39;</td></tr><tr><td style="text-align:center;">animationFrame</td><td style="text-align:center;">动效帧数</td><td style="text-align:center;">Number</td><td style="text-align:center;"><code>[3]</code></td><td style="text-align:center;">50</td></tr><tr><td style="text-align:center;">showOriginValue</td><td style="text-align:center;">显示原始值</td><td style="text-align:center;">Boolean</td><td style="text-align:center;">---</td><td style="text-align:center;">false</td></tr></tbody></table><h2 id="config注释" tabindex="-1">config注释 <a class="header-anchor" href="#config注释" aria-label="Permalink to &quot;config注释&quot;">​</a></h2><ul><li><p>[1] 颜色支持 <code>hex</code> | <code>rgb</code> | <code>rgba</code> 颜色关键字等四种类型。</p></li><li><p>[2] digitalFlopStyle用于配置内置的数字翻牌器样式，详情可查阅数字翻牌器，你可以配置该项来设置数字翻牌器的文字颜色和大小。默认值如下：</p></li></ul><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">digitalFlopStyle: </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">{</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  fontSize</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 25</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
<span class="line"><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">  fill</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">: </span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#fff</span><span style="--shiki-light:#B5695999;--shiki-dark:#C98A7D99;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre></div><ul><li>[3] <code>animationFrame</code>用于配置动画过程的帧数即动画时长</li></ul><h2 id="data属性" tabindex="-1">data属性 <a class="header-anchor" href="#data属性" aria-label="Permalink to &quot;data属性&quot;">​</a></h2><table><thead><tr><th style="text-align:center;">参数</th><th style="text-align:center;">说明</th><th style="text-align:center;">类型</th><th style="text-align:center;">可选值</th><th style="text-align:center;">默认值</th></tr></thead><tbody><tr><td style="text-align:center;">name</td><td style="text-align:center;">环对应名称</td><td style="text-align:center;">String</td><td style="text-align:center;">---</td><td style="text-align:center;">---</td></tr><tr><td style="text-align:center;">value</td><td style="text-align:center;">环对应值</td><td style="text-align:center;">Number</td><td style="text-align:center;">---</td><td style="text-align:center;">---</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-a3095c00 data-v-d1ead651><!--[--><!--]--><!----><nav class="prev-next" data-v-d1ead651><div class="pager" data-v-d1ead651><a class="VPLink link pager-link prev" href="/datav/Other/CapsuleChart/CapsuleChart.html" data-v-d1ead651><!--[--><span class="desc" data-v-d1ead651>Previous page</span><span class="title" data-v-d1ead651>胶囊柱图</span><!--]--></a></div><div class="pager" data-v-d1ead651><a class="VPLink link pager-link next" href="/datav/Other/DigitalFlop/DigitalFlop.html" data-v-d1ead651><!--[--><span class="desc" data-v-d1ead651>Next page</span><span class="title" data-v-d1ead651>数字翻牌器</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"border_borderbox2_borderbox2.md\":\"BjEmAShC\",\"border_borderbox3_borderbox3.md\":\"txqysIeN\",\"border_borderbox1_borderbox1.md\":\"aOsvHch6\",\"decoration_decoration3_decoration3.md\":\"OIHgsC_P\",\"demo_demo.md\":\"DmesEHCm\",\"border_borderbox6_borderbox6.md\":\"B2tc26KG\",\"border_borderbox11_borderbox11.md\":\"DfmuW9Ix\",\"decoration_decoration9_decoration9.md\":\"gjAuvy3l\",\"border_borderbox4_borderbox4.md\":\"OY3lEaIt\",\"decoration_decoration1_decoration1.md\":\"DLtdPr0o\",\"guide_contribute.md\":\"DrvoLTHE\",\"decoration_decoration7_decoration7.md\":\"E-ygj9Hm\",\"border_borderbox8_borderbox8.md\":\"CX33eEsu\",\"border_borderbox5_borderbox5.md\":\"CNyuN36g\",\"decoration_decoration5_decoration5.md\":\"DIH0klnL\",\"decoration_decoration4_decoration4.md\":\"DmorsuJr\",\"border_borderbox10_borderbox10.md\":\"DizlemIp\",\"border_borderbox13_borderbox13.md\":\"CLH9iTlx\",\"guide_guide.md\":\"MmDu-CO5\",\"border_borderbox7_borderbox7.md\":\"B7hbCqqR\",\"border_borderbox9_borderbox9.md\":\"DugspPTE\",\"decoration_decoration6_decoration6.md\":\"DNwZ-k16\",\"other_charts_charts.md\":\"Cc1U2ac4\",\"other_button_button.md\":\"BpjvekTA\",\"border_borderbox12_borderbox12.md\":\"Da0zNgyO\",\"decoration_decoration10_decoration10.md\":\"Bu_zvo4Y\",\"index.md\":\"Du_cS8me\",\"other_waterlevelpond_waterlevelpond.md\":\"CzUpi7WU\",\"decoration_decoration12_decoration12.md\":\"WqiPy6Z2\",\"decoration_decoration8_decoration8.md\":\"Co0vnIez\",\"other_capsulechart_capsulechart.md\":\"Cdo4Fz3h\",\"decoration_decoration11_decoration11.md\":\"C1TqxwxM\",\"guide_bordertip.md\":\"DVHXZ7gG\",\"other_digitalflop_digitalflop.md\":\"Cpi_CUUQ\",\"other_loading_loading.md\":\"BNwFoXQ9\",\"other_fullscreencontainer_fullscreencontainer.md\":\"BZUYXQFi\",\"other_activeringchart_activeringchart.md\":\"kFBHJVUi\",\"decoration_decoration2_decoration2.md\":\"DPSuvEav\",\"other_flylinechart_flylinechart.md\":\"D_1NMwoK\",\"other_percentpond_percentpond.md\":\"CmRtEoEu\",\"other_scrollrankingboard_scrollrankingboard.md\":\"8DZi9nBq\",\"other_flylinechartenhanced_flylinechartenhanced.md\":\"DmAu2dW1\",\"other_conicalcolumnchart_conicalcolumnchart.md\":\"5OTMSgz4\",\"other_scrollboard_scrollboard.md\":\"BdkJtOs5\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"DataV - Vue3\",\"description\":\"A VitePress site\",\"base\":\"/datav/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"DataV - Vue3\",\"outlineTitle\":\"目录\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vaemusic/datav-vue3\"}],\"nav\":[{\"text\":\"指引\",\"link\":\"/Guide/Guide\"},{\"text\":\"Demo\",\"link\":\"/Demo/Demo\"}],\"sidebar\":[{\"text\":\"介绍\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/Guide/Guide\"},{\"text\":\"边框组件注意事项\",\"link\":\"/Guide/BorderTip\"},{\"text\":\"二次开发\",\"link\":\"/Guide/contribute\"}]},{\"text\":\"边框\",\"items\":[{\"text\":\"边框1\",\"link\":\"/Border/BorderBox1/BorderBox1\"},{\"text\":\"边框2\",\"link\":\"/Border/BorderBox2/BorderBox2\"},{\"text\":\"边框3\",\"link\":\"/Border/BorderBox3/BorderBox3\"},{\"text\":\"边框4\",\"link\":\"/Border/BorderBox4/BorderBox4\"},{\"text\":\"边框5\",\"link\":\"/Border/BorderBox5/BorderBox5\"},{\"text\":\"边框6\",\"link\":\"/Border/BorderBox6/BorderBox6\"},{\"text\":\"边框7\",\"link\":\"/Border/BorderBox7/BorderBox7\"},{\"text\":\"边框8\",\"link\":\"/Border/BorderBox8/BorderBox8\"},{\"text\":\"边框9\",\"link\":\"/Border/BorderBox9/BorderBox9\"},{\"text\":\"边框10\",\"link\":\"/Border/BorderBox10/BorderBox10\"},{\"text\":\"边框11\",\"link\":\"/Border/BorderBox11/BorderBox11\"},{\"text\":\"边框12\",\"link\":\"/Border/BorderBox12/BorderBox12\"},{\"text\":\"边框13\",\"link\":\"/Border/BorderBox13/BorderBox13\"}]},{\"text\":\"装饰\",\"items\":[{\"text\":\"装饰1\",\"link\":\"/Decoration/Decoration1/Decoration1\"},{\"text\":\"装饰2\",\"link\":\"/Decoration/Decoration2/Decoration2\"},{\"text\":\"装饰3\",\"link\":\"/Decoration/Decoration3/Decoration3\"},{\"text\":\"装饰4\",\"link\":\"/Decoration/Decoration4/Decoration4\"},{\"text\":\"装饰5\",\"link\":\"/Decoration/Decoration5/Decoration5\"},{\"text\":\"装饰6\",\"link\":\"/Decoration/Decoration6/Decoration6\"},{\"text\":\"装饰7\",\"link\":\"/Decoration/Decoration7/Decoration7\"},{\"text\":\"装饰8\",\"link\":\"/Decoration/Decoration8/Decoration8\"},{\"text\":\"装饰9\",\"link\":\"/Decoration/Decoration9/Decoration9\"},{\"text\":\"装饰10\",\"link\":\"/Decoration/Decoration10/Decoration10\"},{\"text\":\"装饰11\",\"link\":\"/Decoration/Decoration11/Decoration11\"},{\"text\":\"装饰12\",\"link\":\"/Decoration/Decoration12/Decoration12\"}]},{\"text\":\"其他\",\"items\":[{\"text\":\"按钮\",\"link\":\"/Other/Button/Button\"},{\"text\":\"锥形柱图\",\"link\":\"/Other/ConicalColumnChart/ConicalColumnChart\"},{\"text\":\"进度池\",\"link\":\"/Other/PercentPond/PercentPond\"},{\"text\":\"水位图\",\"link\":\"/Other/WaterLevelPond/WaterLevelPond\"},{\"text\":\"加载\",\"link\":\"/Other/Loading/Loading\"},{\"text\":\"飞线图增强版\",\"link\":\"/Other/FlylineChartEnhanced/FlylineChartEnhanced\"},{\"text\":\"飞线图\",\"link\":\"/Other/FlylineChart/FlylineChart\"},{\"text\":\"排名轮播表\",\"link\":\"/Other/ScrollRankingBoard/ScrollRankingBoard\"},{\"text\":\"轮播表\",\"link\":\"/Other/ScrollBoard/ScrollBoard\"},{\"text\":\"图表\",\"link\":\"/Other/Charts/Charts\"},{\"text\":\"胶囊柱图\",\"link\":\"/Other/CapsuleChart/CapsuleChart\"},{\"text\":\"动态环图\",\"link\":\"/Other/ActiveRingChart/ActiveRingChart\"},{\"text\":\"数字翻牌器\",\"link\":\"/Other/DigitalFlop/DigitalFlop\"},{\"text\":\"全屏容器\",\"link\":\"/Other/FullScreenContainer/FullScreenContainer\"}]}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>